import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.14
import Qt.labs.platform 1.1

Rectangle{
    id:container
    height: 60
    width: ListView.view.width + _close.width  // _close.width 关闭按钮宽度
    color : "transparent"

    property var pressX: 0
    property var pressY: 0
    property var closeBtnWidth: 70
    property var currentIndex: -1
    property var viewMoving: false

    // 添加传递给外部的信号
    signal removed()
    signal clicked()
    signal currentIndexChange(real index)

    // 移动动画
    NumberAnimation on x{
            id: _xSmoothed
            duration: 300
            running: false
            onFinished: if (x == 0) _close.text = "删除"
    }

    transitions: Transition {
        NumberAnimation { properties: "opacity"; duration: 200 }
        NumberAnimation { properties: "height"; duration: 300 ; onFinished: container.removed() }
    }

    onViewMovingChanged: {
         color = "transparent"
    }

    // 鼠标事件：
    MouseArea{
        anchors.fill: parent
        //opacity:0.3
        onPressed: {
            pressX = mouseX
            pressY = mouseY
            container.currentIndexChange(index);
            color = "#E3E3E3"
        }

        onPositionChanged: {
            if(Math.abs(pressX-mouseX)>3 || Math.abs(pressY-mouseY)>3){
                parent.opacity = 1
                color = "transparent"
            }
        }

        onReleased: {
            parent.opacity = 1
            color = "transparent"

            // 如果大于3，就左移或者右移
            if(Math.abs(pressX-mouseX)>3){
                // 回去
                if(pressX < mouseX){
                    _xSmoothed.to = 0;
                    _xSmoothed.start();
                    _close.text="删除"
                }else{
                    // 显示删除按钮
                    _xSmoothed.to =-closeBtnWidth;
                    _xSmoothed.start();
                }
            }
            else
            {
                // container.clicked();
                // console.log("点击事件")
                _xSmoothed.to = 0;
                _xSmoothed.start();
            }
        }
        onClicked: {
            container.clicked();
        }
    }

    states:
        State {
            name: "remove"

            PropertyChanges {

                target: container
                height: 0
            }
            PropertyChanges {
                target: container
                opacity: 0
            }
        }



    // 删除按钮
    Button{
        id: _close
        width: -parent.x
        anchors.right: parent.right
        height: parent.height

        background: Rectangle {
            color: "#EE0000"
        }
        text: "删除"

        onPressed: {
            if(text == "删除"){
                text = "确认删除"
                _xSmoothed.to = -closeBtnWidth - 10
                _xSmoothed.start()

            }else{
                parent.state = "remove"
                parent.removed()
            }
        }
    }

    // 行布局
    RowLayout {
          id: layout
          anchors.left: parent.left
          anchors.right: _close.left
          height: parent.height
          spacing: 10
          anchors.margins: 5

          // 头像
          HeadImage{
                id:icon
                width: 45
                height: 45
                headUrl: headSrc.toString()     // headSrc在Model传入
          }

          // 列布局：用户名+最新消息
          ColumnLayout{

               id:_column
               spacing: 5

               RowLayout{
                   // 用户名：
                   Text {
                       id: _name
                       wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                       Layout.fillWidth : true
                       Layout.fillHeight: true
                       Layout.preferredHeight: font.pixelSize + 6
                       verticalAlignment: Text.AlignBottom
                       text: name        // name在Model传入
                   }
                   // 最近的聊天记录的时间
                   Text {
                       Layout.fillWidth : true
                       Layout.fillHeight: true
                       color: "#BABABA"
                       font.family: "Microsoft Yahei"
                       wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                       horizontalAlignment: Text.AlignRight
                       text: qsTr("2023/4/2")
                   }
               }

               // 最近聊天记录:
               Text {
                   id: _recode
                   text: qsTr("你好")
                   color: "#BABABA"
                   font.pixelSize: 13
                   font.family: "Microsoft Yahei"
                   wrapMode: Text.NoWrap
                   verticalAlignment: Text.AlignTop
                   //anchors.right: parent.right
                   Layout.fillWidth: true
                   Layout.fillHeight: true
                   Layout.preferredHeight: font.pixelSize + 6
                   elide: Text.ElideRight
               }
          }
    }
}
